<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<!-- 循环渲染轮播图的 item 项 -->
			<swiper-item v-for="(item,i) in swiperList" :key="i" @click="swiperClickHandler(item)">
				<view class="swiper-item">
					<image :src="item.image_src"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="module">
			<view class="module-item" v-for= "(item,i) in modulelist" :key="i" @click="moduleClickHandler(item)">
				<image :src="item.image_src"></image>
			</view>
		</view>
		<view class="location" v-for= "(item,i) in location_src" :key="i">
			<image :src="item.image_src"></image>
		</view>
		<hxStory class="hxStory"></hxStory>
		<beidou class="beidou"></beidou>
	</view>
</template>

<script>
	import hxStory from "./childComps/hxStory.vue";
	import beidou from "./childComps/beidou.vue";
	export default {
		data() {
			return {
				// 这是轮播图的数据列表
				swiperList:[
					{
						image_src:"../../static/1.jpg", 
						txt:"1"
					},
					{
						image_src:"../../static/2.jpg",
						txt:"2"
					},
					{
						image_src:"../../static/3.jpg",
						txt:"3"
					}
				],
				modulelist:[
					{
						image_src:"https://s2.loli.net/2022/08/04/3GFhVD29sflUbRX.jpg",
						txt:"全景"
					},
					{
						image_src:"https://s2.loli.net/2022/08/04/N72GWQ4sSuK6DAX.jpg",
						txt:"展厅导览"
					}
				],
				location_src:[
					{
						image_src:"../../static/location.jpg"
					}
				],
			};
		},
		components: {
			hxStory,
			beidou,
		},
		methods: {
			swiperClickHandler(item) {
				if(item.txt === '1') {
					console.log(item.txt)
					wx.navigateTo({
						url:'../../pages/articles/articles',
					})
				}
			},
			moduleClickHandler(item) {
				if(item.txt === '全景') {
					console.log(item.txt)
					uni.switchTab({
						url:'../../pages/about/about'
					})
				}
				if(item.txt === '展厅导览') {
					console.log(item.txt)
					uni.switchTab({
						url:'../../pages/about/about'
					})
				}
			},
			vrHandler(item) {
				uni.navigateTo({
					url:'../../pages/vr/vr',
				})
			},
		}
		
	}
</script>
<style>
page{
    background:linear-gradient(180deg,#054cb2 10%,#0c7cb0 15%,#3584a6 25%,#9095a5 40%,#8c878b 55%,#b49707 70%,#9d4f32 85%,#9e6b19 100%);
	height: 100%;
}
</style>
<style lang="scss">
	// @import "../../static/module.css";
swiper {
	display: flex;
	justify-content: center;
	padding: 5rpx;
	border-radius: 30px;
	box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 1);
	margin: 25px 0;
	margin-left: 20rpx;
	height: 380rpx;
	width: 700rpx;
	.swiper-item,
	image {
		border-radius: 30px;
		width: 100%;
		height: 380rpx;
	}
}

.module {
	display: flex;
	justify-content: space-around;
	margin: 15px 0;
	height:340rpx;
	width:700rpx;
	margin-left: 18rpx;
	.module-item,
	image {
		border-radius: 30px;
		box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.6);
		margin-left: 7rpx;
		margin-right: 18rpx;
		width: 340rpx;
		height: 340rpx;
	}
}

.location {
	margin: 15px 0;
	margin-left: 4rpx;
	padding: 15rpx;
	display: flex;
	justify-content: center;
	width: 720rpx;
	height: 50rpx;
	image {
		border-radius: 30rpx;
		width: 100%;
		height: 50rpx;
	}
}
</style>
